<template>
	<view class="container">
		<view class="orderList">

			<view class="orderItem" v-for="item in orderList" :key="item.id">
				<view class="orderHd">编号：{{item.purchase_no}}<span @click="copy(item.purchase_no)" class="copy">复制</span>
				</view>
				<view class="orderCon">
					<view class="oTel" v-if="item.seller_id>0">进货商手机号：{{item.seller.phone}}</view>
					<view class="oSpread" v-if="item.seller_id>0">进货商推广码：{{item.seller.spread_code}}<span @click="copy(item.purchase_no)" class="copy">复制</span></view>
					<view class="oPrice">单价：<text>￥{{item.goods_price}}</text></view>
					<view class="oNum">数量：{{item.num}}</view>
					<view class="oNum">可用数量：{{item.remain_num}}</view>
				</view>
				<view class="orderFooter">
					<view class="amount"><view class="createTime">{{item.create_time}}</view>总价：￥{{item.total_price}}</view>
					<view class="btns">
						<view class="btn" @click="refundStock(item.id)" v-if="item.show_refund==1">退货
						</view>
						<view class="btn" @click="cancelOrder(item.id)" v-if="item.change_type===3&&item.status===0">
							取消订单</view>
						<view class="btn" @click="pay(item.id,item.pay_price)"
							v-if="item.change_type===3&&item.status===0">支付</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />

		<u-modal v-model="showConfirm" :show-cancel-button="true" :content="msg" @cancel="cancel"
			@confirm="confirm"></u-modal>

		<u-modal v-model="refundShow" title="退货" :show-cancel-button="true" confirm-text="提交" confirm-color="#20cbd4"
			@confirm="refund" @cancel="cancelRefund">
			<view class="slot-content">
				<u-field class="contentItem" v-model="num" label="退货数量" placeholder="请填写退货数量"></u-field>
			</view>
		</u-modal>


		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式" :cancel-style="{color:'#909399'}"
			@confirm="payConfirm">
			<view class="slot-content2">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" :separator-size="25" separator-color="#909399"
							:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{pay_price}}</view>
				<u-cell-group :border="false">
					<u-cell-item :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#fece0a'}"
						:icon-size="60" title="积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="yue" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!--  #ifdef MP-WEIXIN -->
					<u-cell-item v-if="purchase_show && mini_show_wx" :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}"
						:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef H5 -->
					<u-cell-item v-if="purchase_show && h5_show_wx" :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}"
						:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item v-if="purchase_show && h5_show_ali" :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" :icon-size="60"
						title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef APP-PLUS -->
					<u-cell-item v-if="purchase_show && app_show_wx" :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}"
						:icon-size="60" title="微信支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="weixin" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<u-cell-item v-if="purchase_show && app_show_ali" :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" :icon-size="60"
						title="支付宝支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="zhifubao" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!-- #endif -->
				</u-cell-group>
			</view>
		</u-modal>

		<u-modal width="80%" v-model="payPwdShow" :show-title="true" confirm-color="#20cbd4" :show-cancel-button="true"
			@confirm="payYE">
			<view class="modelContent">
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password" placeholder="请输入交易密码" />
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import {
		stockOrderList,
		stockRefund,
		stockInfo,
		stockPurchasePay,
		stockPurchasePayZfb,
		stockPurchaseHjVxPay,
		stockPurchasePayGzh,
		stockPurchasePayH5,
		stockCancelOrder
	} from "@/common/api.js";
	export default {
		components: {},
		data() {
			return {
				order_id: 0,
				page: 1,
				num: undefined,
				pay_price: '',
				msg: '',
				showConfirm: false,
				refundShow: false,
				status: 'loadmore',
				modalShow: false,
				payPwdShow: false,
				payPassword: '',
				payType: "yue",
				money_pay_show: 1,
				h5_show_ali: 1,
				h5_show_wx: 1,
				app_show_ali: 1,
				app_show_wx: 1,
				mini_show_ali: 1,
				mini_show_wx: 1,
				purchase_show: 1,
				orderList: []
			};
		},
		onLoad() {
			this.selectOrder()
			this.getStockInfo()
		},
		onReachBottom() {
			this.selectOrder()
		},
		methods: {
			getStockInfo() {
				stockInfo(this, {}, (res) => {
					
					this.money_pay_show = res.paystate.money_pay_show
					this.h5_show_ali = res.paystate.h5_show_ali
					this.h5_show_wx = res.paystate.h5_show_wx
					this.app_show_ali = res.paystate.app_show_ali
					this.app_show_wx = res.paystate.app_show_wx
					this.mini_show_ali = res.paystate.mini_show_ali
					this.mini_show_wx = res.paystate.mini_show_wx
					this.purchase_show = res.paystate.purchase_show
					
				})
			},
			selectOrder() {
				if (this.status !== 'loadmore') {
					return
				}
				this.status = 'loading'
				stockOrderList(this, {
					page: this.page
				}, (res) => {
					this.$set(this, 'orderList', [...this.orderList, ...res])
					this.page++
					this.status = 'loadmore'
					if (res.length === 0) {
						this.status = 'nomore'
					}
				})
			},
			reloadOrder(){
				this.$set(this, 'orderList', [])
				this.page = 1
				this.status = 'loadmore'
				this.selectOrder()
				this.$u.route({
					type:'navigateTo',
					url:'/stock/payResult',
				});
			},
			cancelOrder(order_id) {
				this.order_id = order_id
				this.showConfirm = true
				this.msg = '确定要取消订单吗？'
			},
			refundStock(order_id) {
				this.order_id = order_id
				this.refundShow = true
			},
			refund() {
				stockRefund(this, {
					id: this.order_id,
					num: this.num
				}, () => {
					this.num = ''
					this.order_id = 0
					this.$set(this, 'orderList', [])
					this.page = 1
					this.status = 'loadmore'
					this.selectOrder()
				})
			},
			copy(text){
				uni.setClipboardData({
					data:text
				})
			},
			confirm() {
				this.showConfirm = false
				stockCancelOrder(this, {
					id: this.order_id
				}, () => {
					let order = this.orderList.find(order => order.id === this.order_id)
					order.status = 2
				})
			},
			cancel() {
				this.showConfirm = false
				this.order_id = 0
			},
			cancelRefund() {
				this.num = ''
			},
			payYE() {
				uni.showLoading({
					title: '支付中...'
				});
				this.payPwdShow = false;
				var pay_pwd = this.payPassword;
				this.payPassword = "";
				stockPurchasePay(this, {
					pay_type: 'yu_e',
					order_id: this.order_id,
					pay_pwd: pay_pwd
				})
			},
			pay(order_id, pay_price) {
				this.order_id = order_id
				this.pay_price = pay_price
				this.modalShow = true
			},
			settle() {
				var _this = this;
				_this.modalShow = false;
				if (_this.payType == 'yue') {
					if (this.payPassword == "") {
						this.payPwdShow = true;
					} else {
						this.payYE();
					}
					return;
				}
				uni.showLoading({
					title: '支付中...'
				});
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync("openid") == "") {
					uni.getSetting({
						success: function(a) {
							uni.getUserProfile({
								desc: 'Wexin',
								success: function(b) {
									uni.login({
										success(res) {
											uni.hideLoading();
											if (res.code) {
												wxminiGetOpenid(_this, {
													code: res.code
												})
											} else {
												_this.$refs.uToast.show({
													title: '授权获取失败',
												})
											}
										}
									})
								}
							});
						}
					});
				}
				if (uni.getStorageSync("openid") != "" && uni.getStorageSync("openid") != "undefined") {
					stockPurchasePay(this, {
						pay_type: 'wx_mini',
						order_id: this.order_id
					})
				}
				// #endif
				// #ifdef APP-PLUS
				if (_this.payType == 'zhifubao') {
					stockPurchasePayZfb(_this, {
						pay_type: 'ali_h5',
						order_id: _this.order_id
					})
				} else {
					//汇聚App支付
					stockPurchaseHjVxPay(this, {
						pay_type: 'wx_app',
						order_id: this.order_id
					})
				}
				// #endif
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					if (_this.payType == 'zhifubao') {
						uni.hideLoading();
						_this.$refs.uToast.show({
							title: '微信浏览器无法用支付宝支付',
						})
					} else {
						stockPurchasePayGzh(_this, {
							pay_type: 'wx_chat',
							order_id: _this.order_id
						})
					}
				} else {
					if (_this.payType == 'zhifubao') {
						stockPurchasePayZfb(_this, {
							pay_type: 'ali_h5',
							order_id: _this.order_id
						})
					} else {
						stockPurchasePayH5(_this, {
							pay_type: 'wx_h5',
							order_id: _this.order_id
						})
					}
				}
				// #endif
			},
			radioChange(e) {
				this.payType = e;
			},
			payConfirm() {
				this.settle();
			}
		}
	};
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #F6F6F6;
		height: 100%;
	}

	.orderItem {
		margin: 15rpx 15rpx 25rpx 15rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;

		.orderHd {
			height: 60rpx;
			line-height: 60rpx;
			color: #999999;
			padding: 0 15rpx;
			border-bottom: 1rpx solid #efefef;
			overflow: hidden;
			font-size: 12px;

			.time {
				float: right;
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.orderCon {
			padding: 15rpx;

			.oTel {
				height: 50rpx;
				font-size: 16px;
				color: #333;
			}

			.oSpread {
				height: 50rpx;
				font-size: 14px;
				color: #333;
			}

			.oPrice {
				height: 50rpx;
				font-size: 14px;
				color: #333;

				text {
					color: #FF0000;
				}
			}

			.oNum {
				color: #999999;
				font-size: 12px;
				height: 50rpx;
				line-height: 50rpx;
			}

			.oRemain {
				color: #999999;
				font-size: 12px;
				height: 50rpx;
				line-height: 50rpx;
			}
		}

		.orderFooter {
			border-top: 1rpx solid #efefef;
			color: #999999;
			line-height: 60rpx;
			text-align: right;
			padding: 15rpx;

			.btns {
				overflow: hidden;
			}

			.btn {
				font-size: 12px;
				border: 1rpx solid #d5d5d5;
				display: inline-block;
				border-radius: 10rpx;
				float: right;
				margin-left: 20rpx;
				padding: 0 15rpx;
				line-height: 50rpx;
			}
		}
	}

	.slot-content2 {
		padding: 20rpx 40rpx;
	}

	.slot-content2 .u-radio {
		text-align: right;
		float: right !important
	}

	.payTime {
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}

	.modelPrice {
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modelContent {
		padding: 40rpx;
	}

	.accountData {
		padding: 15rpx 0 15px 200rpx;
		position: relative;
	}

	.accountData text {
		position: absolute;
		left: 0;
		top: 15px;
		display: inline-block;
		width: 190rpx;
		text-align: right;
	}

	.accountData .u-input {
		border-bottom: 0.5rpx solid #222;
	}

	.accountData .u-input input {
		min-width: 260rpx
	}
	.amount{
		overflow: hidden;
	}
	.createTime{
		float: left;
	}
	.copy{
		margin-left: 30rpx;
	}
</style>